<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>遍历节点</title>
        <script>
            window.onload = function () {
                var students = [{
                    name: 'zhansan',
                    age: 12,
                    gender: '男'
                }, {
                    name: 'zhansi',
                    age: 18,
                    gender: '女'
                }, {
                    name: 'zhanwu',
                    age: 19,
                    gender: '男'
                }, {
                    name: 'zhanliu',
                    age: 16,
                    gender: '女'
                }]; 
                var tbody = document.getElementsByTagName('tbody')[0];
                var student_tr = '<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>';
                students.forEach(function (item) {
                    student_tr += '<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.gender+'</td></tr>';
                });
                // console.log(student_tr);
                tbody.innerHTML= student_tr;
            }
        </script>
        <style>
            table{
                margin: 0 auto;
            }
            td{
                width: 100px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0">
            <caption>学生信息表</caption>
            <tbody></tbody>
        </table>
    </body>
</html>